{{ define "js" }}
  <script>
    // form validations
    function checkPasswordsMatch(input) {
      var pass = document.getElementById("password")
      var pwConfirm = document.getElementById("pw-confirm")
      if (pass.value !== input.value) {
        input.setCustomValidity("Passwords do not match")
      } else {
        input.setCustomValidity("")
      }
    }
  </script>
{{ end }}

{{ define "css" }}
{{ end }}

{{ define "content" }}
  {{ with .Data }}
    <div class="container mt-2">
      <div class="row my-3">
        <div class="col-lg-6 col-sm-8 col-xl-5 mx-auto">
          <h1 class="h2">Reset Password</h1>
          <p>Enter and confirm your new password</p>
          {{ if .Flashes }}
            {{ range $i, $flash := .Flashes }}
              <div class="alert {{ if contains $flash "Error" }}alert-danger{{ else }}alert-success{{ end }} alert-dismissible fade show my-3 py-2" role="alert">
                <div class="p-2">{{ $flash | formatHTML }}</div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            {{ end }}
          {{ end }}
          <form action="/reset" method="post">
            {{ .CsrfField }}
            <input value="{{ .State }}" type="text" maxlength="100" class="form-control visually-hidden" id="hash" name="hash" />
            <div class="form-group">
              <label for="password">New Password</label>
              <input required type="password" minlength="5" maxlength="256" class="form-control" autocomplete="new-password" id="password" name="password" autofocus />
            </div>
            <div class="form-group">
              <label for="pw-confirm">Confirm New Password</label>
              <input oninput="checkPasswordsMatch(this)" required type="password" minlength="5" maxlength="256" class="form-control" autocomplete="pw-confirm" id="pw-confirm" name="password" />
            </div>
            <button type="submit" class="btn btn-primary float-right">Reset</button>
          </form>
          <span class="text-muted"></span>
          <a href="/login"><i class="fas fa-chevron-left"></i> Back to Login</a>
        </div>
      </div>
    </div>
  {{ end }}
{{ end }}
